<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple-light">
          <div style="margin: 20px;"></div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="用户名">
              <el-input v-model="formLabelAlign.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type='password' v-model="formLabelAlign.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size='medium' @click="onSubmit">提交</el-button>

            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  // 在单独构建的版本中辅助函数为 Vuex.mapState
  import {
    mapState
  } from 'vuex';
  let self;
  export default {
    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          username: '13237567651',
          password: '111111',
        }
      };
    },
    mounted() {
      self = this;
    },
    methods: {
      onSubmit() {
        console.log(this.name);
        console.log(self.$store.getters.getname);
        //  console.log(self.$store.modules.storeModule.name);
        this.$ajax.post('/api/system/login', {
            username: "13237567651",
            password: "111111"
          })
          .then(function (response) {
            console.log(response);
            //例如：response返回值为token；
            let token =
              'JpZCI6MSwidGVsZXBob25lIjoiMTMyMzc1Njc2NTEiLCJwYXNzd29yZCI6IjExMTExMSIsInVzZXJuYW1lIjoiMjIyMiIsInJvbGUiOjEsImlhdCI6MTU1NTA1NjU0NiwiZXhwIjoxNTU1MTQyOTQ2fQ'
            //保存到localStorage
            localStorage.setItem('authenticationtoken', token);
            self.$store.commit('updateToken', token);
            console.log(self.$store.state.token);

            //此处用this会报错，要用self;
            self.$router.push({
              path: '/index/welcome',
            });
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    computed: {
      ...mapState(['name']),
    }
  }

</script>
